<template>
	<div class="userinfo">
		<van-nav-bar :title="title" fixed left-arrow @click-left="back" />

		<div class="content">
			<van-cell-group>
				<van-uploader :after-read="afterRead">
					<van-field rows="1" autosize label="头像" :right-icon="userInfo.avatar" is-link type="textarea" readonly />
				</van-uploader>

				<van-field v-model="userInfo.nickname" rows="1" @blur="getname" error-message-align="right" :error-message="messageError" autosize label="登录名" type="textarea" input-align="right" />
				<van-field v-model="userInfo.mobile" rows="1" autosize label="手机号" type="textarea" input-align="right" readonly />
			</van-cell-group>
			<div class="button-sub">
				<van-button type="primary" block color="#FE7700" round to="/modify?title=修改手机号">修改手机号</van-button>
				<van-button type="primary" block color="rgb(250,182,123)" round to="/modify/password?title=修改密码">修改密码</van-button>
			</div>

		</div>
	</div>
</template>

<script>
	import head from "@/assets/img/head_img.png"
	export default {
		name: "userIfon",
		components: {

		},
		data() {
			return {
				title: this.$route.query.title,
				message: '喔喔小团子',
				head: head,
				defaf: "18184554445",
				userInfo: {},
				messageError:""


			}
		},
		mounted() {
			this.userInfo = JSON.parse(this.$getcookie("userInfo"))

		},
		methods: {
			back() {
				this.$router.go(-1)
			},
			afterRead(file) {
				const formData = new FormData()
				formData.append("file", file.file)
				this.$api.my.upload(formData).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.userInfo.avatar = res.data.show_url
						this.updateInfo()
					}

				})

			},
			updateInfo() {
				let userData = {
					user_id: this.userInfo.user_id,
					token: this.$getcookie("jy_token"),
					avatar: this.userInfo.avatar,
					nickname: this.userInfo.nickname
				}
				this.$api.my.profile(userData).then(res => {
					// 执行某些操作
					// return null
					this.messageError = ''
					this.$api.my.info(userData).then(resq => {
						// 执行某些操作
						this.$setcookie("userInfo",JSON.stringify(resq.data))
						
					
					})

				})

			},
			getname(){
				
				this.$api.login.checkUsername({username:this.userInfo.nickname}).then(res => {
					// 执行某些操作
					if(res.code == 1){
						this.updateInfo()
					}else{
						this.messageError = res.msg
					}
				
				})
			}
		}


	}
</script>

<style lang="less">
	.userinfo {
		padding-top: 46px;

		.content {
			margin-top: 0.59rem;

			.van-field__label {
				font-size: 0.88rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
				width: auto;
				margin-right: 0.84rem;
			}

			.van-field__control {
				font-size: 0.81rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(93, 93, 93, 1);
			}

			.van-field__control::-webkit-input-placeholder {
				font-size: 0.81rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: #A5A5A5;
			}

			.button-sub {
				display: flex;
				justify-content: space-between;
				margin: 3.28rem auto;
				padding: 0 0.78rem;
			}

			.van-button {
				width: 10.69rem;
				height: 2.69rem;
				font-size: 0.94rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				line-height: 2.69rem;
			}



		}

	}
</style>
<style lang="less">
	.userinfo {
		.van-cell {
			padding: 1.19rem 1.03rem;
			font-size: 0.94rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000;
			align-items: center;
		}

		.van-nav-bar .van-icon {
			color: #000;
		}

		.van-icon__image {
			width: 2.56rem;
			height: 2.56rem;
			border-radius: 50%;

			img {
				width: 100%;
				object-fit: cover !important;
				border-radius: 50%;
			}
		}

		.van-uploader {
			width: 100%;

			.van-uploader__input-wrapper {
				width: 100%;
			}
		}

	}
</style>
